<template>
  <div class="containers">
    <div class="canvas" ref="canvas" style="height: 30vh"></div>
  </div>
</template>

<script>
  // 引入自定义 Viewer
  import {CustomViewer} from '../util/custom-bpmn'

  export default {
    name: 'bpmnViewer',
    data () {
      return {
        bpmnViewer: null,
        container: null,
        canvas: null,
        xmlStrXml: ''
      }
    },
    mounted () {
      let data = {processDefinitionId: 'Process_1:1:2c897e52-3cd6-11ee-b4bb-a4b1c135c088'}
      this.$http.getRequest('user/getProcessModel', data).then(res => {
        this.xmlStrXml = res.data.data.bpmn20Xml.bpmn20Xml
        this.init()
      })
    },
    methods: {
      init () {
        this.bpmnViewer = new CustomViewer({
          container: this.$refs.canvas,
          width: '100%',
          height: '100%'
        })
        this.createNewDiagram()
      },
      // createNewDiagram () {
      //   try {
      //     // 本地 .bpmn 文件地址
      //     console.log(this.xmlStrXml)
      //     // const bpmnXml = require('@/bpmns/test.bpmn')
      //     const result = this.bpmnViewer.importXML(this.xmlStrXml)
      //     // const {warnings} = result
      //     // this.addMarker()
      //   } catch (err) {
      //     console.log(err.message, err.warnings)
      //   }
      // },
      async createNewDiagram () {
        try {
          // 本地 .bpmn 文件地址
          // const bpmnXml = require(this.xmlStrXml)
          const result = await this.bpmnViewer.importXML(this.xmlStrXml)
          const {warnings} = result
          console.log(warnings)
          this.addMarker()
        } catch (err) {
          console.log(err.message, err.warnings)
        }
      },
      addMarker () {
        let canvas = this.bpmnViewer.get('canvas')
        //给节点id 添加css样式
        //canvas.addMarker("Activity_1jefsxq", "highlight");
        line({processInsId: this.processInstanceId}).then(
          (res) => {
            //高亮线
            res.highLine.forEach((e) => {
              if (e) {
                canvas.addMarker(e, 'highlight')
              }
            })
            //高亮任务
            res.highPoint.forEach((e) => {
              if (e) {
                canvas.addMarker(e, 'highlight')
              }
            })
            //高亮我执行过的任务
            res.iDo.forEach((e) => {
              if (e) {
                canvas.addMarker(e, 'highlightIDO')
              }
            })
            //高亮下一个任务
            res.waitingToDo.forEach((e) => {
              if (e) {
                canvas.addMarker(e, 'highlightTODO')
              }
            })
          }
        )
      }

    }
  }
</script>

<style scoped>
  .highlight .djs-visual > :nth-child(1) {
    stroke: green !important;
    fill: rgba(0, 80, 0, 0.4) !important;
  }

  .highlightIDO .djs-visual > :nth-child(1) {
    stroke: rgb(255, 196, 0) !important;
    fill: rgba(255, 196, 0, 0.4) !important;
  }

  .highlightTODO .djs-visual > :nth-child(1) {
    stroke: rgb(255, 0, 0) !important;
    fill: rgba(255, 255, 255, 0.4) !important;
  }

</style>
